<template>
	<view class="detail-box">
		<!-- 轮播图 -->
		<u-swiper :list="bannerList" height='100vw' @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 0" @click="clickBanner">
			<!-- 自定义指示器 -->
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text"><text
						style="font-size: 32rpx;font-weight: 500;margin-right: 4rpx;">{{ currentNum + 1 }}</text>/<text>{{ bannerList.length }}</text></text>
			</view>
		</u-swiper>

		<!-- 轮播图的弹出层 -->
		<u-popup :show="bannerPopup" mode="center" :closeable="false" @close="bannerPopup=false">
			<view style="width: 100vw;height: 100vw;" @click="bannerPopup=false">
				<u-swiper :list="bannerList" height='100vw' :circular="true" :autoplay="false"
					:current="currentPopupNum">
				</u-swiper>
			</view>
		</u-popup>

		<!-- 价格 -->
		<view class="detail-price public345">
			<text style="font-size: 28rpx;">￥</text>
			<text>30.36</text>
		</view>

		<!-- 销量 -->
		<view class="detail-sales public345">
			<text class="text">总销1.5万</text>
		</view>

		<!-- 名称 -->
		<view class="detail-name public345">
			<text class="text">
				产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名
			</text>
		</view>

		<!-- 正品保障 -->
		<view class="truth-box">
			<view class="truth-box-item">
				<image :src="imageUrl('truth-icon.png')" mode="" class="truth-icon" />
				<view class="truth-box-text">
					正品保障
				</view>
			</view>
			<view class="line"></view>
			<view class="truth-box-item">
				<image :src="imageUrl('truth-icon.png')" mode="" class="truth-icon" />
				<view class="truth-box-text">
					精选商品
				</view>
			</view>
			<view class="line"></view>
			<view class="truth-box-item">
				<image :src="imageUrl('truth-transf-icon.png')" mode="" class="truth-icon" />
				<view class="truth-box-text">
					快速发货
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<LeftBorderTitle :title="'商品详情'" />

		<!-- 底部商品详情图片 -->
		<view class="detail-bottom-pic">
			<image class="image" :src="one" v-for="(one,index) in bottomPicList" :key="index" mode="widthFix">
		</view>

		<!-- 立即购买 -->
		<view class="public345 btm-fix-btn">
			<view class="btn" @click="goToPage('/pages/shop/OrderSubmit')">立即购买</view>
		</view>

	</view>
</template>

<script>
	// 左侧边框标题栏组件
	import LeftBorderTitle from '../../components/common/LeftBorderTitle.vue'
	export default {
		data() {
			return {
				// 轮播图列表
				bannerList: [
					this.imagesUrl('market-demo1.png'),
					this.imagesUrl('market-demo1.png'),
					this.imagesUrl('market-demo2.png'),
				],
				currentNum: 0,

				// 轮播图的弹出层
				bannerPopup: false,

				currentPopupNum: 0,

				// 底部详情图列表
				bottomPicList: [
					this.imagesUrl('Rectangle.png'),
					this.imagesUrl('Rectangle.png'),
					this.imagesUrl('Rectangle.png'),
				]
			}
		},
		methods: {
			clickBanner(index) {
				this.bannerPopup = true
				this.currentPopupNum = index
				console.log(index)
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		components: {
			LeftBorderTitle
		}
	}
</script>

<style lang="scss" scoped>
	// 详情页
	.detail-box {

		// 轮播图指示器
		.indicator-num {
			background-color: rgba(0, 0, 0, 0.35);
			width: 90rpx;
			height: 44rpx;
			border-top-left-radius: 22rpx;
			border-bottom-left-radius: 22rpx;
			text-align: center;

			.indicator-num__text {
				color: #fff;
				font-size: 20rpx;
				vertical-align: bottom;
			}
		}

		// 价格
		.detail-price {
			padding-top: 32rpx;
			font-size: 48rpx;
			color: #FF7803;
			background-color: #fff;
		}

		// 销量
		.detail-sales {
			text-align: right;
			font-size: 24rpx;
			font-weight: 500;
			color: #999;
			background-color: #fff;

			.text {
				display: inline-block;
				transform: translateY(-40rpx);
			}
		}

		// 名称
		.detail-name {
			padding-bottom: 26rpx;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #333;
			background-color: #fff;

			// 溢出隐藏
			.text {
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		// 正品保障
		.truth-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 62rpx;
			background: rgba(255, 237, 221, 0.2);

			.truth-box-item {
				display: flex;

				.truth-icon {
					width: 56rpx;
					height: 56rpx;
				}

				.truth-box-text {
					font-size: 24rpx;
					color: #333;
					line-height: 56rpx;
				}
			}

			.line {
				width: 1rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.1);
			}
		}

		// 详情底部图片
		.detail-bottom-pic {
			.image {
				width: 100%;
				vertical-align: middle;
			}

			// 解决固定定位的脱标
			.image:last-child {
				margin-bottom: 120rpx;
			}
		}

		// 底部按钮 立即购买
		.btm-fix-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			background-color: #fff;
			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.btn {
				width: 690rpx;
				border-radius: 44rpx;
				background: #FF7803;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFF;
			}
		}
	}
</style>